<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-用户中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
		.site_con {
			display: flex;
			justify-content: space-between; /* 分隔表单和按钮 */
			align-items: start; /* 对齐到顶部 */
		}

		.button-group {
			display: flex;
			flex-direction: column;
			align-items: center; /* 水平居中按钮 */
			margin-right: 50px; /* 距离右侧边缘50px */
		}

	</style>
</head>
<body>
	<div th:replace="header::top"></div>


	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav" id="LAY_CategoryList">
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/list">全部商品</a></li>
				<li class="interval">|</li>
				<li><a href="/page/turntable">抽奖</a></li>
			</ul>
		</div>
	</div>
	<br>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/user/info">· 个人信息</a></li>
				<li><a href="/page/user/order">· 全部订单</a></li>
				<li><a href="/page/user/site">· 收货地址</a></li>
				<li><a href="/page/user/coupon">· 我的优惠券</a></li>
				<li><a href="/page/user/collect" class="active">· 我的收藏</a></li>
				<li><a href="/page/user/footprint">· 我的足迹</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">


			<h3 class="common_title2">我的收藏</h3>
			<div class="has_view_list">
				<ul class="goods_type_list clearfix" id="CollectList">

				</ul>
			</div>
			<div style="text-align: center" id="laypage"></div>
		</div>
	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>
	<script>
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		layui.use(['laypage'], function () {
			var laypage = layui.laypage;

			var page = 1; //当前是第几页
			var limit = 10; //设置一页显示多少数据
			var isFirst = true;
			loadData();

			function loadData() {
				$.post(
						'/collect/collectList',
						{'page': page, 'limit': limit},
						function (result) {
							console.log(result);
							if (result.code == 0) {
								if (isFirst) {
									isFirst = false;
									laypage.render({
										elem: 'laypage',
										count: result.count, // 数据总数
										limit: 10, //每页显示的条数
										//limits: [5, 10, 15], //每页条数的选择项
										layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
										jump: function(obj, first){
											console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
											console.log(obj.limit); // 得到每页显示的条数
											page = obj.curr;
											limit = obj.limit;
											// 首次不执行
											if(!first){
												loadData();
											}
										}
									});
								}

								$('#CollectList').empty();
								$(result.data).each(function () {
									var html = '';
									html += '<li id="'+this.collectId+'" data-product-id="' + this.productId + '">'
									html += '	<a href="/page/detail?productId=' + this.productId + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '"><img src="' + this.mainImage + '"></a>'
									html += '	<h4><a href="/page/detail?productId=' + this.productId + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '">' + this.name + '</a></h4>'
									html += '	<div class="operate">'
									html += '		<span class="prize">¥ ' + this.price + '</span>'
									html += '		<span class="unit">' + this.price + '/件</span>'
									html += '		<i class="layui-icon layui-icon-star-fill" style="color: red; text-align: right" id="cancelCollect"></i>'
									html += '		<a href="javascript:;" class="add_goods" title="加入购物车" id="add_cart"></a>'
									html += '	</div>'
									html += '</li>'
									$('#CollectList').append(html);
								});
								$('#CollectList').on('click', '#add_cart', function () {
									//加入购物车之前首先判断有没有登录
									//如果没有登录首先完成登录
									//如果已经登录，就将商品信息插入到cart购物车表里面，然后跳转到购物车列表界面
									var productId = $(this).closest('li').attr('data-product-id');
									$.post(
											'/product/checkStock',
											{ 'id': productId },
											function (result) {
												if (result.code == 0) {
													//代表已经登录，直接插入购物车
													addToCart(productId);
												} else {
													mylayer.errorMsg(result.msg);
												}
											},
											'json'
									);
								});
								function addToCart(productId) {
									console.log('addToCart');
									$.ajax({
										url: '/cart/add',
										type: 'POST',
										data: {'productId': productId, 'quantity': 1},
										dataType: 'json',
										success: function (result) {
											if (result.code == 0) {
												mylayer.okMsg(result.msg);
											} else {
												mylayer.errorMsg(result.msg);
											}
										},
										complete : function(xhr, status) {
											//拦截器实现超时跳转到登录页面
											// 通过xhr取得响应头
											var REDIRECT = xhr.getResponseHeader("REDIRECT");
											//如果响应头中包含 REDIRECT 则说明是拦截器返回的需要重定向的请求
											if (REDIRECT == "REDIRECT") {
												var win = window;
												while (win != win.top) {
													win = win.top;
												}
												win.location.href = xhr.getResponseHeader("CONTEXTPATH");
											}
										}
									});
								}
								$('#CollectList').on('click', '#cancelCollect',function() {

									var collectId = $(this).closest('li').attr('id');

									layer.confirm(
											'您确定要取消收藏吗？',
											{icon : 3},
											function (index) {
												$.post(
														'/collect/deleteCollect',
														{'id': collectId},
														function (result) {
															if (result.code == 0) {
																mylayer.okMsg(result.msg);
																setInterval(function() {
																	window.location.reload();
																}, 2000)
															} else {
																mylayer.errorMsg(result.msg);
															}
														},
														'json'
												);
											}
									)

								});
							}

						},
						'json'
				)
			}

			$.post(
					'/category/listAll',
					function (result) {
						if (result.code == 0) {
							$('#LAY_CategoryList').empty();
							$(result.data).each(function () {
								$('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
							})
						}
					},
					'json'
			);

		});
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>